/* components */
import 
  WeiXinApplyTrailFeatureDialog, 
  { 
    WeiXinApplyTrailFeatureDialogVM 
  } from '@src/modules/system/frame/component/WeiXinApplyTrailFeature/WeiXinApplyTrailFeatureDialog.tsx'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useWechatCustomerConnectLink, useWechatCustomerServiceLink } from '@hooks/useYuQue'
/* scss */
import '@src/modules/system/frame/component/WeiXinApplyTrailFeature/WeiXinApplyTrailFeature.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, Ref, ref } from 'vue'
import { CommonComponentInstance } from '@model/VC'

interface WeiXinApplyTrailFeaturePropsSetupState {
  // 点击打开微信客服链接事件
  handlerClickOpenWechatCustomerServiceLink: VoidFunction;
  // 点击打开企微连客链接事件
  handlerClickOpenWechatCustomerConnectLink: VoidFunction;
  // 点击申请试用事件
  handlerClickApplyTrail: VoidFunction;
  // 关闭事件
  handlerClickClose: VoidFunction;
  // 企业微信新功能试用弹窗组件实例
  WeiXinApplyTrailFeatureDialogComponent: Ref<null | WeiXinApplyTrailFeatureDialogVM>;
}

enum WeiXinApplyTrailFeatureEventEnum {
  Close = 'close'
}

export type WeiXinApplyTrailFeatureInstance = ComponentInstance & WeiXinApplyTrailFeaturePropsSetupState
export type WeiXinApplyTrailFeatureVM = ComponentRenderProxy<WeiXinApplyTrailFeatureProps> & CommonComponentInstance

export type WeiXinApplyTrailFeatureProps = {
  
}

export default defineComponent<WeiXinApplyTrailFeatureProps, WeiXinApplyTrailFeaturePropsSetupState>({
  name: ComponentNameEnum.WeiXinApplyTrailFeature,
  components: {
    [ComponentNameEnum.WeiXinApplyTrailFeatureDialog]: WeiXinApplyTrailFeatureDialog
  },
  props: {
    
  },
  setup(props: WeiXinApplyTrailFeatureProps, { emit }) {
    // 点击打开微信客服链接事件
    const handlerClickOpenWechatCustomerServiceLink = useWechatCustomerServiceLink()
    // 点击打开企微连客链接事件
    const handlerClickOpenWechatCustomerConnectLink = useWechatCustomerConnectLink()
    // 企业微信新功能试用弹窗组件实例
    const WeiXinApplyTrailFeatureDialogComponent: Ref<null | WeiXinApplyTrailFeatureDialogVM> = ref(null)
    
    const handlerClickApplyTrail = () => {
      WeiXinApplyTrailFeatureDialogComponent?.value?.handlerShowDialog()
    }
    
    const handlerClickClose = () => {
      emit(WeiXinApplyTrailFeatureEventEnum.Close)
    }
    
    return {
      handlerClickOpenWechatCustomerServiceLink,
      handlerClickOpenWechatCustomerConnectLink,
      handlerClickApplyTrail,
      handlerClickClose,
      WeiXinApplyTrailFeatureDialogComponent
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.WeiXinApplyTrailFeature}>
        <i class="iconfont icon-warning-circle-fill wei-xin-apply-trail-feature-info-icon"></i>
        <span>
          立即体验VIP专属功能：
        </span>
        <div class="wei-xin-apply-trail-feature-link" onClick={this.handlerClickOpenWechatCustomerServiceLink}>
          多渠道客服融合
        </div>
        <div class="wei-xin-apply-trail-feature-link" onClick={this.handlerClickOpenWechatCustomerConnectLink}>
          精细化客户运营
        </div>
        
        <div class="wei-xin-apply-trail-feature-button" onClick={this.handlerClickApplyTrail}>
          点击申请
        </div>
        
        <i class="iconfont icon-close wei-xin-apply-trail-feature-close-icon" onClick={this.handlerClickClose}>
        </i>
        
        <wei-xin-apply-trail-feature-dialog onClose={this.handlerClickClose} ref="WeiXinApplyTrailFeatureDialogComponent" />
        
      </div>
    )
  }
})
